<template>
  <div class="left">
    <a-divider class="divider">通用字段</a-divider>
    <tool :data="item" :key="item.code" v-for="item in commonTool" />
    <a-divider class="divider">内置字段</a-divider>
    <tool :data="item" :key="item.code" v-for="item in builtinTool" />
  </div>
</template>
<script>
import tool from "./tool";
import moment from "moment";
export default {
  components: { tool },
  data() {
    return {
      commonTool: [
        {
          title: "单行文字",
          label: "未命名表单域：",
          icon: "font-colors",
          props: {
            placeholder: "表单域提示文本",
            value: "",
            disabled:false,
          },
          code: "a-input"
        },
        {
          title: "多行文字",
          label: "未命名表单域：",
          icon: "pic-left",
          props: {
            placeholder: "表单域提示文本",
            disabled:false,
            value: ""
          },
          code: "a-textarea"
        },
        {
          title: "单项选择",
          label: "未命名表单域：",
          icon: "check-circle",
          code: "a-radio-group",
          props: {
            disabled:false,
            value: "1"
          },
          children: [
            {
              code: "a-radio",
              props: {
                value: "1"
              },
              children: ["选项1"]
            },
            {
              code: "a-radio",
              props: {
                value: "2"
              },
              children: ["选项2"]
            },
            {
              code: "a-radio",
              props: {
                value: "3"
              },
              children: ["选项3"]
            }
          ]
        },
        {
          title: "多项选择",
          label: "未命名表单域：",
          icon: "check-square",
          code: "a-checkbox-group",
          props: {
            disabled:false,
            value: ["1", "2"]
          },
          children: [
            {
              code: "a-checkbox",
              props: {
                value: "1"
              },
              children: ["选项1"]
            },
            {
              code: "a-checkbox",
              props: {
                value: "2"
              },
              children: ["选项2"]
            },
            {
              code: "a-checkbox",
              props: {
                value: "3"
              },
              children: ["选项3"]
            }
          ]
        },
        {
          title: "下拉选择",
          label: "未命名表单域：",
          icon: "up-square",
          code: "a-select",
          props: {
            disabled:false,
            placeholder: "表单域提示文本",
            value:'1'
          },
          children: [
            {
              code: "a-select-option",
              props: {
                value: "1"
              },
              children: ["选项1"]
            },
            {
              code: "a-select-option",
              props: {
                value: "2"
              },
              children: ["选项2"]
            },
            {
              code: "a-select-option",
              props: {
                value: "3"
              },
              children: ["选项3"]
            }
          ]
        },
        {
          title: "数字输入",
          label: "未命名表单域：",
          icon: "ordered-list",
          code: "a-input-number",
          props: {
            disabled:false,
            placeholder: "表单域提示文本"
          }
        },
        {
          title: "日期时间",
          label: "未命名表单域：",
          icon: "clock-circle",
          code: "a-date-picker",
          props: {
            disabled:false,
            value: moment(),
            showTime: true,
            format: "YYYY-MM-DD HH:mm:ss",
            placeholder: "表单域提示文本"
          }
        },
        {
          title: "时间段",
          label: "未命名表单域：",
          icon: "calendar",
          code: "a-time-picker",
          props: {
            disabled:false,
            showTime: true,
            placeholder: "表单域提示文本"
          }
        },
        {
          title: "文件上传",
          label: "未命名表单域：",
          icon: "upload",
          code: "a-upload",
          props: {},
          children: [
            {
              code: "a-button",
              props: {
                icon: "upload"
              },
              children: ["点击上传"]
            }
          ]
        },
        {
          title: "描述文本",
          label: "",
          icon: "info-circle",
          code: "a-card",
          props: {},
          children: ["允许换行的描述文本"]
        },
        {
          title: "分割线",
          label: "",
          icon: "minus-square",
          code: "a-divider",
          props: {
            orientation: "left"
          },
          children: ["分割线内文本"]
        }
      ],
      builtinTool: [
        {
          title: "员工选择",
          icon: "user-add",
          code: "employeeSelect"
        },
        {
          title: "团队选择",
          icon: "usergroup-add",
          code: "teamSelect"
        },
        {
          title: "当前员工",
          icon: "user",
          code: "currentEmployee"
        },
        {
          title: "当前团队",
          icon: "team",
          code: "currentTeam"
        },
        {
          title: "当前角色",
          icon: "contacts",
          code: "currentRole"
        }
      ]
    };
  }
};
</script>

<style lang="scss" scoped>
.left {
  width: 254px;
  box-shadow: 2px 2px 4px 0 rgba(34, 34, 34, 0.1);
  height: 100%;
  overflow-y: auto;
  user-select: none;
  .divider {
    color: #888;
    font-size: 13px;
  }
}
</style>

